<template>
	<div class="menu">
		<el-menu default-active="1-4-1" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">



		  <template v-for="(item,index) in menu">
		  	<el-submenu :index="'/home'+item.path" :key="index" v-if="!empty(item.children)">
		  		<template slot="title">
		  			<i class="el-icon-location"></i>
		  			<span slot="title">{{item.meta.title}}</span>
		  		</template>
		  		<template v-for="(items,indexs) in item.children">
		  			<el-menu-item :index="'/home/'+item.path+(items.path=='/'?'':'/'+items.path)" :key="indexs">{{items.meta.title}}</el-menu-item>
		  		</template>
		  	</el-submenu>
			<el-menu-item :index="'/home'+(item.path=='/'?'':'/'+item.path)" v-else>
				<i class="el-icon-setting"></i>
				<span slot="title">{{item.meta.title}}</span>
			</el-menu-item>
		  </template>
		</el-menu>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				menu:[],
				isCollapse:false
			}
		},
		created(){
			console.log(this.$router.options.routes)
			this.$router.options.routes.forEach((item)=>{
				if(item.path == "/home"){
					this.menu = item.children;
				}
			})
		},
		methods:{
			/**
			* 判断变量是否空值
			* undefined, null, '', false, 0, [], {} 均返回true，否则返回false
			*/
			empty(v){
			  switch (typeof v){
			    case 'undefined' : return true;
			    case 'string'    : if(trim(v).length == 0) return true; break;
			    case 'boolean'   : if(!v) return true; break;
			    case 'number'    : if(0 === v) return true; break;
			    case 'object'    :
			      if(null === v) return true;
			      if(undefined !== v.length && v.length==0) return true;
			      for(var k in v){return false;} return true;
			      break;
			  }
			  return false;
			},
			handleOpen(e){

			},
			handleClose(e){

			}
		}
	}
</script>
<style lang="scss" scoped>
	.menu{
		background: rgb(153, 23, 54);
		position: fixed;
		top: 70px;
		left: 0;
		width: 185px;
	    height: -moz-calc(100vh - 70px); 
	    height: -webkit-calc(100vh - 70px); 
	    height: calc(100vh - 70px);
	    overflow-y: auto;
	    .el-menu{
	    	background: rgb(153, 23, 54);
	    		width: 185px;
	    		border-right: 0;
	    		overflow: hidden;
	    	.el-submenu,{
	    		/deep/.el-submenu__title{
	    			color: #fff;
	    			/deep/ i{
						color: #fff;
	    			}
	    		}
	    		/deep/.el-submenu__title:hover{
	    			background: rgba(255, 255, 255,.4);
	    		}
	    		/deep/.el-submenu__title:focus{
	    			background: rgba(255, 255, 255,.4);
	    		}
	    		/deep/ .el-menu{
	    			background: rgb(153, 23, 54);
	    		}
	    	}
	    	.el-menu-item{
	    		color: #fff;
	    		i{
	    			color: #fff;
	    		}
	    	}
	    	.el-menu-item:hover{
    			background: rgba(255, 255, 255,.4);
	    	}
	    	.el-menu-item:focus{
    			background: rgba(255, 255, 255,.4);
	    	}

	    }
	    .el-menu:after{
	    	display: none;
	    }
	}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}  

.menu::-webkit-scrollbar{
  width:5px;
  height:10px;
  /**/
}
.menu::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
.menu::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
.menu::-webkit-scrollbar-thumb:hover{
  background: #333;
}
.menu::-webkit-scrollbar-corner{
  background: #179a16;
}
</style>